import React from "react";
import { Area } from "@ant-design/charts";
import style from "./style.module.css";
import { Card } from "antd";
import { Column } from "@ant-design/charts";
import { Tag } from "antd";

function pcBigChartCom() {

  const dataOne = [
    {
      type: "周一",
      sales: 38,
    },
    {
      type: "周二",
      sales: 52,
    },
    {
      type: "周三",
      sales: 61,
    },
    {
      type: "周四",
      sales: 145,
    },
    {
      type: "周五",
      sales: 48,
    },
    {
      type: "周六",
      sales: 38,
    },
    {
      type: "周日",
      sales: 38,
    }
  ];

  let config = {
    data: dataOne,
    xField: "type",
    yField: "sales",
    height: 160,
    xAxis: {
      label: {
        autoHide: true,
        autoRotate: false,
      },
    },
    meta: {
      type: { alias: "类别" },
      sales: { alias: "销售额" },
    },
  };

  const data = [
    {
      Date: "周一",
      scales: 1998,
    },
    {
      Date: "周二",
      scales: 1850,
    },
    {
      Date: "周三",
      scales: 1720,
    },
    {
      Date: "周四",
      scales: 1818,
    },
    {
      Date: "周五",
      scales: 1920,
    },
    {
      Date: "周六",
      scales: 1802,
    }, {
      Date: "周日",
      scales: 1802,
    }
  ];

  let configTwo = {
    data: data,
    xField: "Date",
    yField: "scales",
    height: 160,
    xAxis: {
      range: [0, 1],
      tickCount: 5,
    },
    line: {
      style: {
        stroke: "#F89568",
      },
    },
    areaStyle: function areaStyle() {
      return { fill: "l(270) 0:#ffffff 0.5:#F89568 1:#F89568" };
    },
  };

  return (
    <div className={style.BigChartBox}>
      <Card className={style.BigChart}>
        <div className={style.chart_header}>
          <p>订单</p>
          <div className={style.year}>
            {/* <Tag color="#2db7f5">年</Tag>
            <Tag>月</Tag>
            <Tag>日</Tag> */}
          </div>
        </div>
        <p className={style.border}></p>

        <Column {...config} />
      </Card>

      <Card className={style.BigChart}>
        <div className={style.chart_header}>
          <p>购买量</p>
        </div>
        <p className={style.border}></p>

        <Area {...configTwo} />
      </Card>
    </div>
  );
}

export default pcBigChartCom;
